<template>
  <div class="customer-wrapper">
    <Button type="primary" @click="handleAdd">新增标签</Button>
    <div class="customer-main">
      <Table
        border
        :columns="columns"
        :data="list"
        :loading="loading"></Table>
    </div>

    <collect-operator
      :title="title"
      :formData="form"
      :type="type"
      v-model="modal"
      @cancel="handlemodalCancel"
      @ok="handlemodalOk"
    ></collect-operator>

  </div>
</template>

<script>
  import qs from 'qs';
  import { dateFormat } from '@/static/tools'; 
  import collectOperator from './components/collect-operator.vue';

  export default {
    name: 'collectConfig',
    data () {
      return {
        columns: [
          { title: '标签名称', key: 'label', align: 'center' },
          {
            title: '标签备注',
            key: 'remark',
            align: 'center'
          },
          {
            title: '操作',
            width: 200,
            align: 'center',
            render: (h, params) => {
              const { id, label, remark } = params.row;
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.handleEdit(id, label,remark);
                    }
                  }
                }, '编辑'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '你确定要删除吗？',
                    placement: 'left',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.handleDelete(id);
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    style: {
                      marginLeft: '10px'
                    }
                  }, '删除')
                ])
              ]);
            }
          }
        ],
        list: [],
        loading: true,
        title: '',
        type: '',
        modal: false,
        form: {}
      }
    },
    created() {
      this.getLabelList();
    },
    methods: {
      // 获取产品配置列表
      getLabelList () {
        this.loading = true;
        this.$http.get('/helsinki/admin/collection-label')
        .then(({ data: { data, info, errcode } }) => {
          if (errcode == 0) {
            this.list = data;
          }
          this.loading = false;
        }, error => {
          console.log(error);
        });
      },
      // 新增客户
      handleAdd () {
        this.form = {};
        this.title = '添加催收标签';
        this.type = 'add';
        this.modal = true;
      },
      // 编辑客户信息
      handleEdit(id, label, remark) {
        this.title = '编辑催收标签';
        this.type = 'update';
        this.form.id = id;
        this.form.label = label;
        this.form.remark = remark;
        this.modal = true;
      },
      // 删除功能
      handleDelete(id) {
        this.$http.delete(`/helsinki/admin/collection-label?id=${id}`)
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.$Message.success('删除标签成功');
            this.getLabelList();
          }
        }, error => {
          // this.$Message.error(error.statusText);
        });
      },
      // 新增 | 编辑 cancel回调函数
      handlemodalCancel () {
        this.modal = false;
      },
      // 新增 | 编辑 success回调函数
      handlemodalOk () {
        this.modal = false;
        this.getLabelList();
      }
    },
    components: {
      collectOperator
    }
  }
</script>

<style lang="scss" scoped>
  .customer-wrapper {
    padding: 15px;
  }

  .customer-main {
    margin-top: 15px;
  }
</style>
